<script lang="ts">
export default {
    name: 'Blog'
}
</script>
<script setup lang="ts">
import useBaseModel from '@/composables/cms/blog/useBaseModel';
import useBlog from '@/composables/cms/blog/useBlog';
// 基础数据
const { blogModel, rules } = useBaseModel()

const { blogForm, paginateHandleChange, limitHandleChange, uploadUrl, headerObj, latestPostsCountHandleChange, footerSinceHandleChange, handleFaviconSuccess, beforeFaviconUpload, handleLogoSuccess, beforeLogoUpload, handleDarkLogoSuccess, beforeDarkLogoUpload, reset, save, favicon, logo, darkLogo } = useBlog(blogModel)

</script>
<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>博客基础配置</span>
            </div>
        </template>
        <el-form :model="blogModel" ref="blogForm" :rules="rules" label-width="130px">
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="baseURL" label="博客URL">
                        <el-input v-model="blogModel.baseURL"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="title" label="博客标题">
                        <el-input v-model="blogModel.title"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="theme" label="博客主题">
                        <el-select v-model="blogModel.theme">
                            <el-option label="hugo-wave-theme" value="hugo-wave-theme" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="DefaultContentLanguage" label="默认语言">
                        <el-select v-model="blogModel.DefaultContentLanguage">
                            <el-option label="中文" value="zh-cn" />
                            <el-option label="英文" value="en" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="paginate" label="分页数量">
                        <el-input-number v-model="blogModel.paginate" class="mx-4" :min="0" controls-position="right"
                            @change="paginateHandleChange" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="limit" label="列表数量限制">
                        <el-input-number v-model="blogModel.limit" class="mx-4" :min="0" controls-position="right"
                            @change="limitHandleChange" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="author" label="作者">
                        <el-input v-model="blogModel.author"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="favicon" label="favicon">
                        <el-upload class="wave-uploader" :action="uploadUrl" :show-file-list="false"
                            :on-success="handleFaviconSuccess" :before-upload="beforeFaviconUpload"
                            :headers="headerObj">
                            <input type="hidden" v-model="blogModel.favicon" />
                            <img v-if="blogModel.favicon" :src="blogModel.baseURL + '/' + blogModel.favicon"
                                class="wave-favicon" />
                            <img v-else-if="favicon != ''" :src="favicon" class="wave-favicon" />
                            <el-icon v-else class="wave-uploader-favicon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="logo" label="logo">
                        <el-upload class="wave-uploader" :action="uploadUrl" :show-file-list="false"
                            :on-success="handleLogoSuccess" :before-upload="beforeLogoUpload" :headers="headerObj">
                            <input type="hidden" v-model="blogModel.logo" />
                            <img v-if="blogModel.logo" :src="blogModel.baseURL + '/' + blogModel.logo"
                                class="wave-logo" />
                            <img v-else-if="logo != ''" :src="logo" class="wave-favicon" />
                            <el-icon v-else class="wave-uploader-logo">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="darkLogo" label="darkLogo">
                        <el-upload class="wave-uploader" :action="uploadUrl" :show-file-list="false"
                            :on-success="handleDarkLogoSuccess" :before-upload="beforeDarkLogoUpload"
                            :headers="headerObj">
                            <input type="hidden" v-model="blogModel.darkLogo" />
                            <img v-if="blogModel.darkLogo" :src="blogModel.baseURL + '/' + blogModel.darkLogo"
                                class="wave-dark-logo" />
                            <img v-else-if="darkLogo != ''" :src="darkLogo" class="wave-favicon" />
                            <el-icon v-else class="wave-uploader-logo">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="description" label="博客描述">
                        <el-input v-model="blogModel.description"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="dateFormat" label="日期格式化">
                        <el-input v-model="blogModel.dateFormat" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="blogGroupBy" label="归档">
                        <el-select v-model="blogModel.blogGroupBy">
                            <el-option label="按年" value="year" />
                            <el-option label="按月" value="month" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item class="long-text" prop="latestPostsCount" label="首页显示最新几篇文章">
                        <el-input-number v-model="blogModel.latestPostsCount" class="mx-4" :min="0"
                            controls-position="right" @change="latestPostsCountHandleChange" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item class="long-text" prop="blogGroupBy" label="首页是否显示所有文章">
                        <el-select v-model="blogModel.showAllPostsOnHomePage">
                            <el-option label="是" :value="1" />
                            <el-option label="否" :value="0" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item class="long-text" prop="article_toc" label="文章详情页是否显示标题列表">
                        <el-select v-model="blogModel.article_toc">
                            <el-option label="是" :value="1" />
                            <el-option label="否" :value="0" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="about_title" label="关于我标题">
                        <el-input v-model="blogModel.about_title"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="footer_since" label="页脚日期">
                        <el-input-number v-model="blogModel.footer_since" class="mx-4" :min="0"
                            controls-position="right" @change="footerSinceHandleChange" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item prop="footer_customText" label="页脚说明">
                        <el-input v-model="blogModel.footer_customText"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" :offset="0">
                    <el-form-item>
                        <el-button @click="reset()">重置</el-button>
                        <el-button type="primary" @click="save()">保存</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
</template>